<script setup>
  import {ref} from 'vue'

  const props = defineProps({
    minLength: {
      type: Number,
      default: 7
    }
  })

  let password = ref('')

</script>

<template>
  <input id="pw" type="password" v-model="password">
  <span data-test="error" v-show="password.length < props.minLength">Password length must be greater than or equal to {{props.minLength}}.</span>
</template>

<style scoped>
  span {
    margin-left: 10px;
  }
</style>